<html>
    <head>
        <meta charset="utf-8">
        <title>3D立方体</title>
        <style>
            html{
                height: 100%;
                
                background: radial-gradient(circle,#333,#000,#000);
            }
            body
            {
             height: 100%;
             margin: 0;
             
             display: flex;
             justify-content: center;
             align-items: center;

             perspective: 1500px;
            }
            main{
               width: 300px;
               height: 300px;
               transform-style: preserve-3d;
               animation: 10s spin linear infinite;
            }
            main div{
                position: absolute;
                width: 100%;
                height: 100%;
                background-size: 100%;
                border: 1px solid black;
            }
            .font{
                background-image: url(1.JPG);
                transform: translateZ(150px);
            }
            .back{
                background-image: url(2.JPG);
                transform: translateZ(-150px);
            }
            .left{
                background-image: url(3.JPG);
                transform: rotateY(90deg) translateZ(-150px);
            }
            .right{
                background-image: url(4.JPG);
                transform: rotateY(90deg) translateZ(150px);
            }
            .top{
                background-image: url(5.JPG);
                transform: rotateX(90deg) translateZ(-150px);
            }
            .bottom{
                background-image: url(6.JPG);
                transform: rotateX(90deg) translateZ(150px);
            }
            @keyframes spin{
               
                0%{
                    transform:rotateX(0deg) rotateY(0deg);
                }
                100%{
                    transform:rotateX(360deg) rotateY(360deg);
                }
            }
        </style>
        <!--perspective 定义元素的3D属性 只能影响3D转换元素-->
        <!--只能改变子元素  让子元素获得透视效果 而不是元素本身-->
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html>